<template>
  <div class="_wz_menu">
    <a-menu v-model:selectedKeys="current" mode="horizontal" :items="menuList" :subMenuOpenDelay="0.2" @click="menuJump"/>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import {getMenu} from "@/util/getMenu";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex





//reactive
export default defineComponent({
  name: 'menu',//组件名称
  components: {
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $common = inject('$common');//自己封装的方法
    const router = useRouter();//路由跳转使用


    const state = reactive({
      menuList:[],//菜单数据
      current:'',
    });



    //菜单跳转
    const menuJump = (data)=>{
      if(!!data.item.target){
        //target 打开方式
        //  _blank:外部链接   _innerblank:外部打开内部路由
        if(data.item.target == '_blank'){
          window.open(data.item.menuUrl, '_blank')
        }else{
          window.open('#/' + data.item.menuUrl, '_blank')
        }
      }else{
        router.push({ path:'/' + data.key, query: {}})
      }
    }


    //监听
    watch(() => router,(news, old) => {
      state.current = [router.currentRoute.value.name];
    },{deep: true});



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      let menuList = (JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !item.menuHide)

      // k.menuHide
      state.menuList = $common.convertTree(menuList,{
        value:'menuUrl',
        title:'name',
        children:'children',
      });



      state.current = [router.currentRoute.value.name];

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      menuJump,//菜单跳转
    }
  }
})


</script>
<style lang="less">
._wz_menu{
  .ivu-menu-light{
    background: none;
  }
  //.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item{
  //  border: 0px;
  //  color: #fff;
  //}
  :where(.css-dev-only-do-not-override-eq3tly).ant-menu-light .ant-menu-submenu-selected >.ant-menu-submenu-title{
    color: #2b82ff !important;
    //background-color: #B039CC !important;
  }
  :where(.css-dev-only-do-not-override-eq3tly).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu-selected::after{
    border-bottom-color:#2b82ff !important;
  }
  //:where(.css-dev-only-do-not-override-eq3tly).ant-menu-light .ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected), :where(.css-dev-only-do-not-override-eq3tly).ant-menu-light .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){
  //  color: #2b82ff !important;
  //}

  .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){
    color: #2b82ff !important;
  }

  .ant-menu-light{
    line-height: 64px;
    background: none;
    color: #fff;
  }
  .ant-menu-title-content{
    font-weight: 900;
  }
  .ant-menu-item-selected {
  }

}
</style>
